<template>
  <el-dialog
    :title="编辑"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="用户ID" prop="userid">
        <el-input v-model="ruleForm.userid" readonly />
      </el-form-item>
      <el-form-item label="微信昵称" prop="wechat">
        <el-input v-model="ruleForm.wechat" />
      </el-form-item>
      <el-form-item label="会员手机" prop="tel">
        <el-input v-model="ruleForm.tel" />
      </el-form-item>
      <el-form-item label="消费金额" prop="pay">
        <el-input v-model="ruleForm.pay" />
      </el-form-item>
      <el-form-item label="订单数量" prop="order">
        <el-input v-model="ruleForm.order" />
      </el-form-item>
      <el-form-item label="会员等级" prop="level">
        <el-input v-model="ruleForm.level" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 使用静态资源，先引入在赋值
import { updateFunApi } from '../../../api/studentApi'
export default {
  props: ['row'],
  data() {
    return {
      dialogVisible: true,
      ruleForm: {
        // 表单绑定的对象
        userid: '', // 修改是需要保存id值的
        wechat: '',
        tel: '',
        pay: '',
        order: '',
        level: ''
      },
      rules: {
        // 规则验证
        wechat: [
          // name是被验证的字段
          { required: true, message: '请输入微信昵称', trigger: 'blur' } // 判空
        ],
        tel: [
          // name是被验证的字段
          { required: true, message: '请输入会员手机号', trigger: 'blur' }// 判空
        ],
        pay: [
          // name是被验证的字段
          { required: true, message: '请输入消费金额', trigger: 'blur' } // 判空
        ],
        order: [
          // name是被验证的字段
          { required: true, message: '请输入订单数量', trigger: 'blur' } // 判空
        ]
      }
    }
  },
  mounted() {
    this.ruleForm = { ...this.row } // 一层对象， 解构赋值是可以的  JSON.parse(JSON.stringify())
  },
  methods: {
    submitForm(formName) {
      // 提交按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 修改逻辑
          //  alert(123)
          // 获取表单的值(id)，发送请求给后端，后端执行修改逻辑（新值替换旧值），
          // 通知前端修改成功了，刷新表格关闭弹框。
          // console.log('this.ruleForm', this.ruleForm)
          updateFunApi(this.ruleForm).then((res) => {
            // console.log(res)
            if (res.code == 200) {
              this.$emit('resettable')
            }
          })
        } else {
          // 验证不通过
          // console.log('error submit!!')
          return false
        }
      })
    },
    closeDialog() {
      // 关闭弹框
      this.$emit('closedialog')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          // 关闭弹框
          this.$emit('closedialog')
        })
        .catch((_) => {})
    }
  }
}
</script>

<style>
</style>
